<template>
    <div>
        <breadcrumb :routerList="routerList"></breadcrumb>
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="轮播图片" >
                <el-upload
                    class="avatar-uploader"
                    action="https://yx.tfnhg.com/oss_upload"
                    :show-file-list="false"
                    :on-success="handleSuccess"
                    :before-upload="beforeAvatarUpload"
                    :disabled="isDisabled"
                >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="轮播图类型">
                <el-select v-model="ClassType" placeholder="请选择轮播图类型">
                    <el-option
                            v-for="item in bannerType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="isDisabled"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="权值">
                <el-row>
                    <el-col :span="4"><el-input v-model="qz" placeholder="请输入权值" ></el-input></el-col>
                </el-row>

            </el-form-item>
            <el-form-item label="跳转页面">
                <el-switch
                        v-model="isLink"
                        active-color="#13ce66"
                        inactive-color="#eeeeee"
                        @change="switchChange"
                        :disabled="isDisabled"
                >
                </el-switch>
            </el-form-item>
            <el-form-item label="链接类型" v-if="isLink">
                <el-select v-model="bannerLinkType" placeholder="请选择链接位置" @change="getTypeList">
                    <el-option
                        v-for="item in selectOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="isDisabled"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品选择" v-if="type==1 && isLink">
                <el-select v-model="fid" placeholder="请选择商品" >
                    <el-option
                            v-for="item in productsList "
                            :key="item.value"
                            :label="item.product_name"
                            :value="item.id"
                            :disabled="isDisabled"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="店铺选择" v-if="type==2 && isLink">
                <el-select v-model="fid" placeholder="请选择店铺">
                    <el-option
                            v-for="item in shopList"
                            :key="item.value"
                            :label="item.supplier_name"
                            :value="item.id"
                            :disabled="isDisabled"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm" :disabled="isDisabled">提交</el-button>
                <el-button @click="goBack">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb.vue'
export default {
    components: {breadcrumb},
    data(){
        return {
            routerList: [
                {
                    name: '商城轮播图',
                    path: '/bannerList'
                },
                {
                    name: 'BANNER',
                    path: ''
                }
            ],
            selectOptions:[
                {
                    value:1,
                    label:'商品'
                },
                {
                    value:2,
                    label:'店铺'
                }
            ],
            bannerType:[
                {
                    value:1,
                    label:'首页BANNER'
                },
                {
                    value:2,
                    label:'开店申请页BANNER'
                },
                {
                    value: 3,
                    label: '积分商城banner'
                }
            ],
            bannerLinkType:'',
            type:0,
            isLink:false,
            fid:'',
            shopList:[],
            productsList:[],
            imageUrl:'',
            ruleForm: {
                bannerImgList: [],
            },
            ClassType:'',
            isDisabled:false,
            bannerId:'',
            qz: ''
        }
    },
    created(){
        this.mainType = this.$route.query.type;
        if(this.mainType == 4){
            this.isDisabled = true
        }
        if(this.$route.query.list != ''){
            let list = this.$route.query.list;
            // console.log(list);
            this.getData(list)
        }
    },
    methods:{
        getData(list){
            this.type = list.type;
            this.getTypeList(this.type);
            this.bannerLinkType = Number(list.type);
            if(this.type !=0 ){
                 this.isLink = true;
            }
            this.ClassType = Number(list.class_type);
            this.fid = list.fid
            this.imageUrl = list.banner
            this.bannerId = list.id
            this.qz = list.qz
        },
        //获取类型id
        getTypeList(val){
            // console.log(val)
            this.type = val;
            this.fid = '';
            val == 1?this.getProducts():val==2?this.getSupplierList():''
        },
        submitForm() {
            if(!this.imageUrl){
                this.$message.warning('请上传图片！')
            }else if(!this.ClassType){
                this.$message.warning('请选择轮播图类型！')
            }
            else if(this.isLink){
                if(!this.fid){
                    this.$message.warning('请完善跳转信息！')
                }
                else{
                    this.operationBanner()
                }
            }
            else{
                this.operationBanner()
            }


        },
        async operationBanner(){
            let data = {}
            if(this.mainType == 1){
                data = {
                    banner: this.imageUrl,
                    type:this.type,
                    fid:this.fid,
                    class_type:this.ClassType,
                    qz: this.qz
                }
            }else{
                data = {
                    id: this.bannerId,
                    banner: this.imageUrl,
                    type:this.type,
                    fid:this.fid,
                    class_type:this.ClassType,
                    qz: this.qz
                }
            }
            console.log(data)
            let res = await this.$Http.operationBanner({
                type: this.mainType,
                pro: data
            })
            console.log(res)
            if(res.code == 1){
                this.$message({
                    type: 'success',
                    message: this.mainType==1?'新增banner成功':'修改banner成功!'
                });
                this.$router.go(-1);
            }
        },
        async getProducts(){
            let res = await this.$Http.getGoodsList({
                tj:10,
                status:1
            })
            // console.log(res);
            this.productsList = res;
        },
        async getSupplierList(){
            let res = await this.$Http.getSupplier()
            // console.log(res)
            this.shopList = res.list;
        },
        switchChange(val){
            if(!val){
                this.bannerLinkType = '';
                this.fid = '';
                this.type = 0;
            }
        },
        handleSuccess(res, file) {
            console.log(file);
            this.imageUrl = file.response;
        },
        beforeAvatarUpload(file) {
            console.log(file);
            let typeList = ["image/jpg","image/jpeg","image/png","image/pjpeg","image/gif","image/bmp","image/x-png"];
            let isJPG = false;
            for(let i in typeList){
                if(file.type === typeList[i]){
                    isJPG = true;
                }
            }
            const isLt2M = file.size / 1024 / 1024 < 5;

            if (!isJPG) {
                this.$message.error('只能上传图片格式!');
            }
            if (!isLt2M) {
                this.$message.error('图片大小不能超过 5MB!');
            }
            return isJPG && isLt2M;
        },
        goBack(){
            this.$router.go(-1);
        },
    }
}
</script>

<style>
    .demo-ruleForm{
        width: 100%;
        background: white;
        margin-top: 20px;
        padding: 20px 0;
        box-sizing: border-box;
    }
    .input{
        width: 50%;
    }
</style>
